/**
 * @desc 柱图
 * */
import React, { Component } from 'react';
import echarts from 'echarts';

class TheBarChart extends Component {
	componentDidMount() {
		// const type = this.props.label;
		const myChartBar = echarts.init(this.barChart);
		myChartBar.setOption({
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999'
					}
				}
			},
			// grid: {
			//     right: 50
			// },
			xAxis: [
				{
					type: 'category',
					data: this.props.xData,
					axisLabel: {
						fontSize: 16,
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
				}
			],
			yAxis: [
				{
					type: 'value',
					name: this.props.yName,
					min: 0,
					axisLabel: {
						fontSize: 16,
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisPointer: {
						show: false,
					},
				},
			],
			color: ['#3aa0ff', '#4ecb73'],
			series: [
				{
					name: this.props.name,
					type: 'bar',
					data: this.props.yData
				},
			]
		});
		window.addEventListener('resize', function () {
			myChartBar.resize();
		});
	}

	componentWillUnmount() {
		window.removeEventListener('resize', function () {

		}, false)
	}

	render() {
		return <div ref={ref => this.barChart = ref} id="barChart" style={{ width: '100%', height: '100%' }} />
	}
}

export default TheBarChart
